<template>
  <div class="gs-containerall">
    <el-col class="gs-container">
      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col class="gs-color" :span="14">配置名</el-col>
        <el-col class="gs-color" :span="5">当前值</el-col>
        <el-col class="gs-color" :span="5">修改值</el-col>
      </el-row>

      <!-- <el-row :gutter="10" style="height: 40px;line-height: 40px">
      <el-col :span="14">Redis Host:</el-col>
      <el-col :span="14">{{ ReceiveObj.redishost }}</el-col>
      <el-col :span="14">
        <el-input
          v-model="redishost"
          @change="isValidHost(redishost)?redishost:redishost=''"
        />
      </el-col>
    </el-row> -->

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">写入速度显示图像的数据</el-col>
        <el-col :span="5">{{ ReceiveObj.writespeedtime }}</el-col>
        <el-col :span="5">
          <el-input v-model="writespeedtime" @change="!isNaN(writespeedtime)?writespeedtime:writespeedtime=''" />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">设备连接图像显示点数</el-col>
        <el-col :span="5">{{ ReceiveObj.connectionsnumber }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="connectionsnumber"
            @change="!isNaN(connectionsnumber)?connectionsnumber:connectionsnumber=''"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">最近使用metric表显示点数</el-col>
        <el-col :span="5">{{ ReceiveObj.writedatamessagenumber }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="writedatamessagenumber"
            @change="!isNaN(writedatamessagenumber)?writedatamessagenumber:writedatamessagenumber=''"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">实时计算图像显示点数：</el-col>
        <el-col :span="5">{{ ReceiveObj.thermaldatanumber }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="thermaldatanumber"
            @change="!isNaN(thermaldatanumber)?thermaldatanumber:thermaldatanumber=''"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">是否启用压缩：</el-col>
        <el-col :span="5">{{ ReceiveObj.usecompact }}</el-col>
        <el-col :span="5">
          <el-select v-model="usecompact" class="tagSelect2" clearable filterable>
            <el-option value="true" />
            <el-option value="false" />
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">是否启用异步客户端：</el-col>
        <el-col :span="5">{{ ReceiveObj.useasyncclient }}</el-col>
        <el-col :span="5">
          <el-select v-model="useasyncclient" class="tagSelect2" clearable filterable>
            <el-option value="true" />
            <el-option value="false" />
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">写入批处理条数：</el-col>
        <el-col :span="5">{{ ReceiveObj.compactNum }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="compactNum"
            @change="!isNaN(compactNum)?compactNum:compactNum=''"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">写入时间间隔：</el-col>
        <el-col :span="5">{{ ReceiveObj.writeInterval }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="writeInterval"
            @change="!isNaN(writeInterval)?writeInterval:writeInterval=''"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="14">警报信息存储的最大数量：</el-col>
        <el-col :span="5">{{ ReceiveObj.alertmessagenumber }}</el-col>
        <el-col :span="5">
          <el-input
            v-model="alertmessagenumber"
            @change="!isNaN(alertmessagenumber)?alertmessagenumber:alertmessagenumber=''"
          />
        </el-col>
      </el-row>

    </el-col>
    <el-col class="gs-container">
      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col class="gs-color" :span="8">警报邮件配置</el-col>
        <el-col class="gs-color" :span="8">当前值</el-col>
        <el-col class="gs-color" :span="8">修改值</el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8">邮件STMP服务器地址</el-col>
        <el-col :span="8">{{ ReceiveObj.email_host }}</el-col>
        <el-col :span="8">
          <el-input
            v-model="email_host"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8">发件人邮箱</el-col>
        <el-col :span="8">{{ ReceiveObj.from_username }}</el-col>
        <el-col :span="8">
          <el-input
            v-model="from_username"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8">STMP授权码</el-col>
        <el-col :span="8">************</el-col>
        <el-col :span="8">
          <el-input
            v-model="from_authorization"
          />
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8">收件人邮箱</el-col>
        <el-col :span="8">{{ ReceiveObj.email_to }}</el-col>
        <el-col :span="8">
          <el-input
            v-model="email_to"
            type="textarea"
            placeholder="可填写多个邮箱，以英文,分割"
          />
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8" :offset="16">
          <el-button class="gs-button" native-type="button" style="margin-top: 10px;" @click="emailtest">发送测试邮件</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="height: 40px;line-height: 40px">
        <el-col :span="8" :offset="16">
          <el-button class="gs-button" type="primary" native-type="button" @click="submitEdit">提交修改</el-button>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import { editSettings } from '@/api/GrafanaSettings'
import { validHost } from '@/utils/validate'
import { errorMessage } from '@/utils/message'
import axiosservice from '@/utils/CommonData.js'
import { Message } from 'element-ui'

export default {
  name: 'IndexVue',
  data() {
    return {
      ReceiveObj: {
        connectionsnumber: '',
        writedatamessagenumber: '',
        thermaldatanumber: '',
        writespeedtime: '',
        compactNum: '',
        useasyncclient: '',
        usecompact: '',
        writeInterval: '',
        alertmessagenumber: '',
        email_host: '',
        from_username: '',
        from_authorization: '',
        email_to: ''

      },
      connectionsnumber: '',
      writedatamessagenumber: '',
      thermaldatanumber: '',
      writespeedtime: '',
      compactNum: '',
      useasyncclient: '',
      usecompact: '',
      writeInterval: '',
      alertmessagenumber: '',
      email_host: '',
      from_username: '',
      from_authorization: '',
      email_to: ''
    }
  },
  mounted() {
    this.getSettingValue()
  },
  methods: {
    emailtest() {
      const tempObj = {
        wordlist: ['思知机器人', '天气'],
        text: this.email_to
      }
      axiosservice.post('/keywords/', JSON.stringify(tempObj), { headers: { 'Content-Type': 'text/plain;charset=UTF-8' }})
        .then((res) => {
          if (res.status == 200) {
            console.log(res.data)
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('网络请求异常!')
        })
    },
    // emailtest() {
    //   console.log('fas')
    //   const tempObj = {
    //     email_host: this.email_host ? this.email_host : this.ReceiveObj.email_host, // 没有修改就用当前值
    //     from_username: this.from_username ? this.from_username : this.ReceiveObj.from_username,
    //     from_authorization: this.from_authorization ? this.from_authorization : this.ReceiveObj.from_authorization,
    //     email_to: this.email_to ? this.email_to : this.ReceiveObj.email_to,
    //     title: '时序数据库SMTP邮件测试',
    //     content: '如果收到这封邮件，说明当前的邮件配置正确'
    //   }
    //   axiosservice.post('/emailtest', JSON.stringify(tempObj), { headers: { 'Content-Type': 'text/plain;charset=UTF-8' }})
    //     .then((res) => {
    //       if (res.status == 200) {
    //         if (res.data.code == 200) {
    //           Message({
    //             type: 'success',
    //             message: '邮件发送成功',
    //             duration: 3 * 1000
    //           })
    //         } else {
    //           this.$message.error('发送邮件失败!')
    //         }
    //       }
    //     })
    //     .catch((error) => {
    //       console.log(error)
    //       this.$message.error('网络请求异常!')
    //     })
    // },
    getSettingValue() {
      axiosservice.get('/presentvalue')
        .then((res) => {
          if (res.status == 200) {
            this.ReceiveObj = res.data
            console.log(this.ReceiveObj)
            if (this.ReceiveObj.email_to == '') {
              this.ReceiveObj.from_username = 'not configured'
              this.ReceiveObj.email_to = 'not configured'
            }
          }
        })
        .catch((error) => {
          console.log(error)
          this.$message.error('获取metrics数据失败!')
        })
    },
    isValidHost(host) {
      if (!validHost(host)) {
        errorMessage('地址不合法')
        return false
      }
      return true
    },
    /**
     * 本质用来判断是否处于1024-65000之间
     * @param num
     * @returns {boolean}
     */
    isInt(num) {
      if (isNaN(num)) {
        errorMessage('数值应在1024-65000之间！')
        return false
      }
      if (parseInt(num) < 1024 || parseInt(num) > 65000) {
        return false
      }

      return true
    },
    submitEdit() {
      const tempObj = {
        connectionsnumber: this.connectionsnumber ? this.connectionsnumber : '',
        writedatamessagenumber: this.writedatamessagenumber ? this.writedatamessagenumber : '',
        thermaldatanumber: this.thermaldatanumber ? this.thermaldatanumber : '',
        writespeedtime: this.writespeedtime ? this.writespeedtime : '',
        compactNum: this.compactNum ? this.compactNum : '',
        useasyncclient: this.useasyncclient,
        usecompact: this.usecompact,
        writeInterval: this.writeInterval ? this.writeInterval : '',
        alertmessagenumber: this.alertmessagenumber ? this.alertmessagenumber : '',
        email_host: this.email_host,
        from_username: this.from_username,
        from_authorization: this.from_authorization,
        email_to: this.email_to
      }
      editSettings(tempObj).then(res => {
        this.getSettingValue()
        Message({
          type: 'success',
          message: '参数修改成功',
          duration: 3 * 1000
        })
        this.connectionsnumber = ''
        this.writedatamessagenumber = ''
        this.thermaldatanumber = ''
        this.writespeedtime = ''
        this.compactNum = ''
        this.useasyncclient = ''
        this.usecompact = ''
        this.writeInterval = ''
        this.alertmessagenumber = ''
        this.email_host = ''
        this.from_username = ''
        this.from_authorization = ''
        this.email_to = ''
        // console.log(res)
      }).catch(err => console.log(err))
    }
  }
}
</script>

<style scoped>
.gs-container {
  margin-top: 0px;
  box-sizing: border-box;
  width: 50%;
  padding: 0 20px;
}

.gs-container .el-row {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* .el-row .el-col:first-child {
  text-align: right;
} */

.gs-color {
  color: green;
}

.gs-button {
  margin-top: 30px;
  margin-right: 20px;
  /* float: right; */
}
.el-select{
  width: 100%;
}
</style>
